<template>
  <el-dialog :title="'选择记账明细'" :close-on-click-modal="false" :visible.sync="financevisible" :append-to-body="true">
  <div>
    <div v-loading="floorRoomSign">

      <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="handleSelectionChange" style="width: 100%;">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column prop="payPrice" header-align="center" align="center" label="科目/方式">
          <template slot-scope="scope">
            <div v-if="scope.row.payType == 0"><span>预收账款</span></div>
            <div v-if="scope.row.payType == 1"><span>预授权</span></div>
            <div v-if="scope.row.payType == 2">
              <span>{{ scope.row.consumeName }}</span>
            </div>
            <div v-if="scope.row.payType == 3"><span>押金</span></div>
            <div v-if="scope.row.payType == 4">
              <span v-if="scope.row.isNightTrial == 1">夜审房费</span>
              <span v-else>当日房费</span>
            </div>
            <div v-if="scope.row.payType == 5"><span>预收退款</span></div>
            <div v-if="scope.row.payType == 6"><span>结账收款</span></div>
            <div v-if="scope.row.payType == 7"><span>结账退款</span></div>
            <div v-if="scope.row.payType == 8"><span>退押金</span></div>
            <div v-if="scope.row.payType == 9"><span>冲账</span></div>
          </template>
        </el-table-column>
        <el-table-column prop="payPrice" header-align="center" align="center" label="付款方式">
          <template slot-scope="scope">
            <span v-if="scope.row.nowTypeName">{{ scope.row.nowTypeName }}</span>
            <span v-else>--</span>
          </template>
        </el-table-column>

        <el-table-column prop="payPrice" header-align="center" align="center" label="消费">
          <template slot-scope="scope">
            <span v-if="scope.row.payType == 2 || scope.row.payType == 4 || scope.row.payType == 9" style="color: #f24e4c!important">
              ￥
              <span v-if="scope.row.payType == 9">-</span>
              {{ scope.row.payPrice }}</span>
            <span v-else style="color: #f24e4c!important">--</span>
          </template>
        </el-table-column>

        <el-table-column prop="payPrice" header-align="center" align="center" label="收款">
          <template slot-scope="scope">
            <span
              v-if="scope.row.payType == 0 || scope.row.payType == 3 || scope.row.payType == 6 || scope.row.payType == 5 || scope.row.payType == 7 || scope.row.payType == 8"
              style="color: #31c88b;"
            >
              ￥
              <span v-if="scope.row.payType == 8 || scope.row.payType == 5 || scope.row.payType == 7">-</span>
              {{ scope.row.payPrice }}
            </span>
            <span v-else style="color: #31c88b;">--</span>
          </template>
        </el-table-column>

        <el-table-column prop="remarks" header-align="center" align="center" label="备注">
          <template slot-scope="scope">
            <span v-if="scope.row.remarks">{{ scope.row.remarks }}</span>
            <span v-else>暂无</span>
          </template>
        </el-table-column>

        <el-table-column prop="creatTime" header-align="center" align="center" label="时间"></el-table-column>
        <el-table-column prop="businessDay" header-align="center" align="center" label="营业日">
          <template slot-scope="scope">
            <span v-if="scope.row.businessDay">{{scope.row.businessDay}}</span>
            <span v-else>--</span>
          </template>
        </el-table-column>

        <el-table-column prop="type" header-align="center" align="center" label="标签">
          <template slot-scope="scope">
            <span v-if="scope.row.type == 0">未结</span>
            <span v-if="scope.row.type == 1">已结</span>
            <span v-if="scope.row.type == 2">已转</span>
            <span v-if="scope.row.turnType == 1">,转出</span>
            <span v-if="scope.row.turnType == 2">,转入</span>
            <span v-if="scope.row.demolitionType == 1">,拆账</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </div>

  </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import moment from 'moment';
export default {
  data() {
    return {
      financevisible: false,
      initItem:{},
      floorRoomSign: false,
      curr: 1,
      currState: '0',
      info: {},
      popInfo: {},
      dataForm: {
        singleId: '',
        peopleId: '',
        roomIds: ''
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      closingVisible: false,
      yushouqlistVisible: false,
      transferaccountsVisible: false,
      demolitionVisible: false,
      timerInOut:'',
      printconfig: {}, //打印配置
      currData: '',
      priceMap: {},
      info: {
        peopleEntity: {},
        singleEntity: {},
        floorRoomEntity: {},
        roomEntity: {}
      },
      rowData: {},
      unitedHouseSelectionId:[],
      multipleSelection:[]
    };
  },
  components: { },
  methods: {
    init(item,list) {
      this.unitedHouseSelectionId = list;
      this.initItem = item;
      this.financevisible = true;
      this.getDataList();
    },
    submit(){
      var money = 0;
      this.multipleSelection.forEach(item=>{
        money+=item.payPrice
      })
      this.initItem.money = money
      this.financevisible = false
      this.$nextTick(()=>{
        this.$emit('refreClosing')
      })
    },
    handleSelectionChange(val){
      this.multipleSelection = val;
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl('/hotel/thotelfloorroomcheckinaccounting/xieyiList'),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          unitedHouseSelectionIds: this.unitedHouseSelectionId.join(","),
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list;
          this.totalPage = data.page.totalCount;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
  },
  mounted() {

  }
};
</script>

<style>
.common_prompt {
  padding: 9px 16px;
  background: #fff3f2;
  border: 1px solid #fde0d4;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
#printMenu {
  transform: rotate(90deg);
}
.dl_drop {
  color: rgba(0, 0, 0, 0.65);
  z-index: 999;
  border-radius: 4px;
  overflow: hidden;
}
.dl_drop dd {
  padding: 0 15px;
  font-size: 13px;
  height: 35px;
  line-height: 35px;
  cursor: pointer;
  white-space: nowrap;
  margin: 0px;
}
</style>
